<template>
    <div class="fillcontain">
        <nav-header></nav-header>
        
        <el-card class="box-card">
            
            <div slot="header" class="clearfix">
                <div class="md_list">
                    <el-button type="text" >商品列表</el-button>
                    <el-button type="primary" icon="el-icon-plus" class="rg">
                        <router-link to="/addShop" style="color:#fff;">添加商品</router-link>
                    </el-button>
                </div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    
                    <el-form-item label="商品类型">
                        <el-select v-model="formInline.orderType" placeholder="商品类型">
                            <el-option label="iPhone7" value=""></el-option>
                            <el-option label="iPhone8" value=""></el-option>
                            <el-option label="iPhoneX" value=""></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input v-model="formInline.orderNum" placeholder="商品名称"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="success" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            

            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="" label="#" width="50">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="商品" width="300">
                    <template slot-scope="scope">
                        <img class="pic_goods" v-bind:src="scope.row.productPic" alt="">
                        <span class="goods_name">{{ scope.row.produceName }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="shopType" label="商品分类" width="120"></el-table-column>
                <el-table-column prop="shopPrice" label="商品价格" width="100"></el-table-column>
                <el-table-column prop="isTuiJian" label="推荐" width="120">
                    <template slot-scope="scope">
                        <el-button type="primary" v-if="scope.row.isTuiJian == true" @click="isTuiCheck(scope.$index, scope.row)">是</el-button>
                        <el-button type="danger" v-else @click="isTuiCheck(scope.$index, scope.row)">否</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="isOnLine" label="上/下架" width="100">
                    <template slot-scope="scope">
                        <el-button type="primary" v-if="scope.row.isOnLine == true" @click="onLineCheck(scope.$index, scope.row)">是</el-button>
                        <el-button type="danger" v-else @click="onLineCheck(scope.$index, scope.row)">否</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="haveNum" label="库存" width="100"></el-table-column>
                <el-table-column prop="sortNum" label="排序" width="100">
                    
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <router-link to="/addShop">
                            <el-button type="text" size="small" >查看</el-button>
                        </router-link>
                        <el-button type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination style="margin-top: 25px;" background layout="prev, pager, next" :total="1000"></el-pagination>

        </el-card>

    </div>
</template>

<script>
import NavHeader from '@/components/header.vue';
export default {
    name: 'shopList',
    data () {
        return {
            tableData: [{
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                productPic: 'https://img10.360buyimg.com/n7/jfs/t6700/66/128366418/51763/92837a80/593a1bdcN18cb007d.jpg',
                productId: '001',
                shopType: 'iPhone8',
                shopPrice: '4566',
                isTuiJian: true,
                isOnLine: true,
                haveNum: 1000,
                sortNum: 20
            }, {
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                productPic: 'https://img10.360buyimg.com/n7/jfs/t6700/66/128366418/51763/92837a80/593a1bdcN18cb007d.jpg',
                productId: '002',
                shopType: 'iPhone8',
                shopPrice: '4566',
                isTuiJian: false,
                isOnLine: true,
                haveNum: 1000,
                sortNum: 20
            }, {
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                productPic: 'https://img10.360buyimg.com/n7/jfs/t6700/66/128366418/51763/92837a80/593a1bdcN18cb007d.jpg',
                productId: '003',
                shopType: 'iPhone8',
                shopPrice: '4566',
                isTuiJian: true,
                isOnLine: true,
                haveNum: 1000,
                sortNum: 20
            }, {
                produceName: 'Phone X 国行正品网络:全网通 颜色:深空灰色 内存:256G',
                productPic: 'https://img10.360buyimg.com/n7/jfs/t6700/66/128366418/51763/92837a80/593a1bdcN18cb007d.jpg',
                productId: '004',
                shopType: 'iPhone8',
                shopPrice: '4566',
                isTuiJian: false,
                isOnLine: true,
                haveNum: 1000,
                sortNum: 20
            }],
            formInline: {
                orderNum: '',
                orderPhone: '',
                orderType: ''
            },
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            },
            value2: '',
        }
    },
    mounted(){
        
    },
    created () {

    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        /**
        * 上下架操作
        */
        onLineCheck(index, row){
            this.$alert('确定要上下架操作吗', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if(action == 'confirm'){
                        row.isOnLine = !row.isOnLine;
                    }
                }
            });
        },
        /**
        * 推荐操作
        */
        isTuiCheck(index, row){
            this.$alert('确定要执行推荐操作吗', '提示', {
                confirmButtonText: '确定',
                callback: action => {
                    if(action == 'confirm'){
                        row.isTuiJian = !row.isTuiJian;
                    }
                }
            });
        }
    },
    components: {
        NavHeader
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.le{
    float: left;
}
.rg{
    float: right;
}
.clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
.shop_box{
    width: 100%;
}
.btn_sp{
    width: 100%; height: 50px;
}
.box-card{
    width: 94%;
    margin: 20px auto;
}
.el-table__row .el-table .cell {
    padding: 8px;
    font-size: 12px;
}
.cell{
    text-align: center;
}
.md_list{
    width: 100%; box-sizing: border-box;
    padding: 18px 20px;
    border-bottom: 1px solid #d1dbe5;
    margin-bottom: 20px;
}
.pic_goods{
    float: left;
    width: 80px; height: 80px;
    margin: 6px 6px 6px 0;
    border-radius: 4px;
}
.goods_name{
    float: left;
    width: 175px;
    padding-top: 10px;
}
</style>
